<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <textarea name="textarea" id="txt" cols="30" rows="10"></textarea>
    <script src='../js/ball.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            log = document.getElementById('txt');

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
           var mouse = utils.captureMouse(canvas),
               w = 0, h = 0,
               bounce = -0.9,
               gravity = 0.5,
               balls = [],
               ballNum = 10;
           
           var ball = new Ball(40, "red");
               ball.x = Math.random()*(canvas.width);
               ball.y = Math.random()*(canvas.height); 

           var isMouseDown = false;    
               
           canvas.addEventListener("mousedown", function(event){
                if(utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)){   
                    console.log(0); 
                    isMouseDown = true;
                  w = mouse.x - ball.x;
                   h = mouse.y - ball.y;
                   canvas.addEventListener('mouseup', onMouseUp ,false);
                   canvas.addEventListener('mousemove', onMouseMove, false);
                } 
            }, false);
           
           function onMouseUp(){
               ball.isMousedown = false;
               isMouseDown = false;
               ball.vx =0;
               canvas.removeEventListener('mouseup', onMouseUp ,false);
               canvas.removeEventListener('mousemove', onMouseMove, false);
           }
           function onMouseMove(){
               ball.x = mouse.x - w;
               ball.y = mouse.y - h;
           }
           
           
           function checkBoundries(ball){
               var left = canvas.width,
                   right = 0,
                   top = 0,
                   bottom = canvas.height;
               
               ball.x += ball.vx;
               ball.vy += gravity;
               ball.y += ball.vy;
               
               if(ball.x + ball.radius > left){
                   ball.vx *= bounce;
                   ball.x = left - ball.radius;
               }else if(ball.x - ball.radius < right){
                   ball.vx *= bounce;
                   ball.x = ball.radius; 
               }
               
               if(ball.y + ball.radius > bottom){
                   ball.vy *= bounce;
                   ball.y = bottom - ball.radius;
               }else if(ball.y - ball.radius < top){
                   ball.vy *= bounce;
                   ball.y = ball.radius;
               }
           }

           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               if(!isMouseDown){
                    checkBoundries(ball);
               }
               
              
               ball.draw(context);
           }());

        }
    </script>
</body>
</html>
